import React from 'react';
import moment from 'moment';
import Axios from 'axios';
import { apiPrefix } from 'shared/api';
import { Select, DatePicker } from 'antd';
import QueryButton from '../QueryButton';


import './index.less';

const { Option } = Select;
const dateFormat = 'YYYY-MM-DD';


class ContractInput extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      contractPeriods: [],
      contractCategories: [],
    };
  }
  componentDidMount() {
    const api = `${apiPrefix}api/v1/contract/periods`;
    const api2 = `${apiPrefix}/api/v1/contract/categories`;
    Axios.get(api)
      .then((response) => {
        this.setState({ contractPeriods: response.data.data });
      });
    Axios.get(api2)
      .then((response) => {
        this.setState({ contractCategories: response.data.data });
      });
  }
  handleOnchange=(value, key) => {
    this.props.onChange(value, key);
  }
  query=() => {
    console.log('oooooppp');
  }
  render() {
    const { contractPeriods, contractCategories } = this.state;
    const { queryMessage } = this.props;
    const contract = queryMessage.contract;
    return (
      <div className="contract-input">
        <div>
          <span>合同类型</span>
          <Select
            style={{ width: 200, marginLeft: 20 }}
            showSearch
            value={contract.category_id || ''}
            placeholder="请选择合同类别"
            onChange={value => this.handleOnchange(value, 'category_id')}
            optionFilterProp="children"
            filterOption={(input, option) =>
              option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
              }
          >
            {
              contractCategories.map((value, index) => (
                <Option value={value.id} key={index}>{value.name}</Option>
                ))
            }
          </Select>
        </div>
        <div>
          <span>有效期</span>
          <Select
            style={{ width: 200, marginLeft: 20 }}
            showSearch
            value={contract.period_id || ''}
            placeholder="请选择有效期"
            onChange={value => this.handleOnchange(value, 'period_id')}
            optionFilterProp="children"
            filterOption={(input, option) =>
              option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
              }
          >
            {
              contractPeriods.map((value, index) => (
                <Option value={value.id} key={index}>{value.name}</Option>
                ))
            }
          </Select>
        </div>
        <div>
          <span>首次取证时间</span>
          <DatePicker
            placeholder="开始时间"
            value={!contract.st_mfd_date ? null : moment(contract.st_mfd_date, dateFormat)}
            style={{ marginLeft: 20, width: 95 }}
            onChange={(date, dateString) => this.handleOnchange(dateString, 'st_mfd_date')}
          />
          <DatePicker
            placeholder="结束时间"
            value={!contract.end_mfd_date ? null : moment(contract.end_mfd_date, dateFormat)}
            style={{ marginLeft: 10, width: 95 }}
            onChange={(date, dateString) => this.handleOnchange(dateString, 'end_mfd_date')}
          />
        </div>
        <div>
          <span>合同到期时间</span>
          <DatePicker
            placeholder="开始时间"
            value={!contract.st_exp_date ? null : moment(contract.st_exp_date, dateFormat)}
            style={{ marginLeft: 20, width: 95 }}
            onChange={(date, dateString) => this.handleOnchange(dateString, 'st_exp_date')}
          />
          <DatePicker
            placeholder="结束时间"
            value={!contract.end_exp_date ? null : moment(contract.end_exp_date, dateFormat)}
            style={{ marginLeft: 10, width: 95 }}
            onChange={(date, dateString) => this.handleOnchange(dateString, 'end_exp_date')}
          />
        </div>
        <div>
          <QueryButton
            query={this.query}
          />
        </div>
      </div>
    );
  }
}

export default ContractInput;
